<template>
    <!-- <a-modal v-model="visible" centered :footer="null" :closable="false"> -->
        <!-- <div class="n-dialog-mask"></div> -->
        <div class="n-dialog-container n-yjdialog-modal">
            <div class="n-dialog-header">
                意见反馈 <a class="dialog-close" @click="$emit('close')"></a>
            </div>
            <div class="n-yj-form">
                <form @submit.prevent="() => { return false; }">
                    <div class="form-field">
                        <label>反馈类型</label>
                        <el-radio-group v-model="yjForm.feedbackType">
                            <el-radio label="产品建议">产品建议</el-radio>
                            <el-radio label="功能故障">功能故障</el-radio>
                            <el-radio label="其他问题">其他问题</el-radio>
                        </el-radio-group>
                    </div>
                    <div class="form-field textarea">
                        <textarea placeholder="问题描述" v-model="yjForm.content"></textarea>
                    </div>
                    <div class="yj-upload-wrap">
                        <el-upload :action="aliInfo.host" :file-list="imgList" :show-file-list="false"
                            :http-request="onUploadFile" :drag="true" :before-upload="firstPictureBefore"
                            class="yj-uploadbtn">

                        </el-upload>
                        <div class="succ-data" v-for="(img, idx) in yjForm.images" :key="idx">
                            <img loading="lazy" :src="img" alt="">
                            <a class="remove" @click="yjForm.images.splice(idx, 1)"></a>
                        </div>
                        <!-- <div class="succ-data">
                            <img loading="lazy" src="https://img.gameui.net/608377@1x291.webp" alt="">
                            <a class="remove"></a>
                        </div> -->
                    </div>
                    <div class="form-field">
                        <input type="text" v-model="yjForm.phone" placeholder="联系方式（手机/邮箱/QQ）">
                    </div>
                    <div class="yj-foot-btns">
                        <a class="cancel" @click="handleClose">取消</a>
                        <a class="confirm" @click="handleSubmit">确定</a>
                    </div>
                </form>
            </div>
        </div>
    <!-- </a-modal> -->
</template>

<script>
import axios from 'axios'
import api from '@/api/api'
export default {
    data() {
        return {
            visible: false,
            aliData: {},
            imgList: [],
            aliInfo: {
                host: ''
            },
            yjForm: {
                type:0,
                images: []
            }
        }
    },
    props:['targetid','targettype'],
    methods: {
        onUploadFile({ file }) {
            //this.aliData.key = this.aliInfo.dir + "/" + new Date().getTime() + file.name;

            const formData = new FormData();
            formData.append("key", this.aliData.key);
            formData.append("file", file);

            let that = this;
            axios.post(this.aliInfo.host, formData, {
                'Content-type': 'multipart/form-data'
            }).then(res => {
                that.yjForm.images.push(that.aliInfo.host + '/' + that.aliData.key);
                // 上传成功后的处理
            }, err => {
                // 出现错误时的处理
            })
        },
        handleClose() {
            this.yjForm = {};
            this.$emit('close')
        },
        /* 封面上传 */
        firstPictureBefore(file) {
            this.aliData.key = this.$savePublishAlihost + "/" + new Date().getTime() + file.name;
            return true;
        },
        async handleSubmit() {
            if (!this.yjForm.feedbackType) {
                this.$amessage.warn('请选择反馈类型')
                return;
            }
            if (!this.yjForm.content) {
                this.$amessage.warn('请填写反馈内容')
                return;
            }
            if (!this.yjForm.phone) {
                this.$amessage.warn('请填写联系方式')
                return;
            }
            let data = JSON.parse(JSON.stringify(this.yjForm));
            data.images = data.images.join(',');
            let res = await api.addFeedBack(data);
            if (res.code == 0) {
                this.$amessage.success('感谢反馈，你的建议对我们很重要～');
                this.handleClose();
            }
        }
    },
    destroyed() {
        // document.body.style.overflow='inherit';
    },
    async mounted() {
        this.yjForm.feedbackId=this.targetid;
        this.yjForm.type=this.targettype;
        // document.body.style.overflow='hidden';
        let token = window.localStorage.getItem('token')
        if (token) {
            let res = await api.getImgPoc();

            this.aliInfo = res.data;
        }
    }
}
</script>